<template>
	<view class="container">
		<text class="noDataViewTip" v-if="!hideNoData">暂无数据</text>
		<uni-list :border="false" class="scrollview">
			<uni-list-item
				class="list-item"
				v-for="(item,index) in listArr"
				:key="index"
				@click="gotolist(item.staffName)"
			>					
				<!-- 通过header插槽定义列表左侧图片 -->
				<template v-slot:header>
					<view>
						<image class="list-item-thumb" :src="item.supplierPic"></image>
					</view>
				</template>
				<template v-slot:body>
					<view class="body-content">
						<view class="list-item-text-title">
							<text>{{ item.supplierName }}</text>
						</view>
						<view style="display: flex;margin-top: 5rpx;">
							<text class="list-item-text-desc">星级：</text>
							<uni-rate allow-half :readonly="true" size="16" :value="item.score" />
						</view>
						<view style="margin-top: 5rpx;" class="list-item-text-desc">预约时间：{{ item.serveDay + ' ' + item.workTime }}</view>
						<view class="commonLine" />
						<view class="operateBtn">
							<button v-if="item.status === 2" :disabled="btnDisabled" class="btn" size="mini" @click="showGradeView(item.id)">评分</button>
							<button v-if="item.status !== 1" :disabled="btnDisabled" class="btn" size="mini" @click="deleteOrder(item.id)">删除</button>
							<button v-if="item.status === 1" :disabled="btnDisabled" class="btn" size="mini" @click="cancelSub(item.id)">取消预约</button>
							<button v-if="item.status === 1" :disabled="btnDisabled" class="btn" size="mini" @click="completeSub(item.id)">确认完成</button>
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-popup ref="popup" :animation="true" type="bottom" class="popup">
			<view class="gradeView">
				<text style="font-weight: bold; font-size: 30rpx;">评 分</text>
				<uni-rate size="30" style="margin-top: 20rpx;" allow-half :value="grade" @change="onChangeRate"/>
				<button
					class="sureBtn"
					style="margin-top: 20rpx; font-size: 27rpx; width: 250rpx;height: 70rpx;"
					:loading="sureBtnLoading"
					@click="sureClick">确 定</button>
			</view>
		</uni-popup >
	</view>
</template>

<script>
	import { getOrderList, cancelSubscribe, deleteOrder, givescore, completeSubscribe  } from "@/API/mine.js"
	export default {
		data() {
			return {
				listArr: [],
				searchValue: null,
				btnDisabled: false,
				sureBtnLoading: false,
				grade: 5.0, //评分
				selOrderId: '',
				userId: '',
				hideNoData: true
			}
		},
		onLoad() {
			const self =  this
			uni.getStorage({
			    key: 'user_login_key',
			    success: (res) => {
			        self.userId = res.data.userId
					self.getOrderList()
			    }
			})
		},
		methods: {
			getOrderList() {
				getOrderList({
					userId: this.userId
				}).then(res => {
					this.listArr = res.data
					this.btnDisabled = false
					this.$refs.popup.close()
					this.hideNoData = this.listArr && this.listArr.length > 0
				})
			},
			gotolist() {
			},
			onChangeRate(value) {
				this.grade = value.value
			},
			// 完成预定
			completeSub(orderId) {
				const self = this
				uni.showModal({
					title: '提示',
					content: '确认已完成本次服务？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '确认中...',
								icon: 'none'
							})
						    // 执行确认后的操作
							self.btnDisabled = true
							completeSubscribe({
								orderId: orderId
							}).then(res => {
								uni.hideLoading()
								self.getOrderList()
							}).catch(err => {
								self.btnDisabled = false
								uni.hideLoading()
							})
						} 
						else {
							// 执行取消后的操作
						}
					}
				})
			},
			// 取消预定
			cancelSub(orderId) {
				const self = this
				uni.showModal({
					title: '提示',
					content: '确认取消该预约吗？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '取消预约中...',
								icon: 'none'
							})
						    // 执行确认后的操作
							self.btnDisabled = true
							cancelSubscribe({
								orderId: orderId
							}).then(res => {
								uni.hideLoading()
								self.getOrderList()
							}).catch(err => {
								self.btnDisabled = false
								uni.hideLoading()
							})
						} 
						else {
							// 执行取消后的操作
						}
					}
				})
			},
			// 删除订单
			deleteOrder(orderId) {
				const self = this
				uni.showModal({
					title: '提示',
					content: '确认要删除预约记录吗？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '删除预约记录中...',
								icon: 'none'
							})
							self.btnDisabled = true
							deleteOrder({
								orderId: orderId
							}).then(res => {
								uni.hideLoading()
								self.getOrderList()
							}).catch(err => {
								self.btnDisabled = false
								uni.hideLoading()
							})
						}
						else {
							// 执行取消后的操作
						}
					}
				})
			},
			// 评分
			gradeOrder(orderId) {
				givescore({
					orderId: orderId,
					score: this.grade
				}).then(res => {
					this.getOrderList()
				}).catch(err => {
				})
			},
			// 显示评价弹框
			showGradeView(orderId) {
				this.grade = 5.0
				this.selOrderId = orderId
				this.$refs.popup.open()
			},
			// 关闭评价弹框
			closeGradeView() {
				this.$refs.popup.close()
			},
			sureClick() {
				this.gradeOrder(this.selOrderId)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		height: 100%;
		background-color: $app-bg-color;
	}
	.scrollview{
		width: 100%;
		height: 100%;
	}
	::v-deep .uni-list {
		background-color: $app-bg-color;
	}
	
	::v-deep .uni-list-item {
		border-radius: 20rpx;
		margin: 10rpx;
		background-color: white;
	}
	.body-content {
		margin-left: 20rpx;
		width: calc(100% - 100rpx);
	}
	.commonLine {
		margin-top: 10rpx;
		background-color: $text-tip-color;
		height: 1.5rpx;
		width: 100vw;
	}
	.operateBtn {
		height: 50rpx;
		width: 100%;
		margin-top: 15rpx;
		text-align: right;
		.btn {
			margin-right: 20rpx;
			height: 55rpx;
		}
	}
	.gradeView {
		height: 250rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding-top: 20rpx;
	}
</style>
